<template>
  <div>
    <!-- 频道tab栏 -->
    <van-tabs v-model="ChannelsId">
      <van-tab v-for="item in ChannelsList" :key="item.id" :title="item.name">
        <article-list :ChannelsId="item.id" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getChannels } from '@/api'
import ArticleList from '@/views/Home/components/home-list.vue'
export default {
  name: 'home-index',
  components: {
    ArticleList
  },
  data () {
    return {
      ChannelsId: '0',
      ChannelsList: []
    }
  },
  methods: {
    // 获取频道列表
    async fetchChannels () {
      const { data } = await getChannels()
      // console.log(data, '频道列表')
      this.ChannelsList = data.channels
    }
  },
  mounted () {
    this.fetchChannels()
  }
}
</script>

<style>
  .van-tabs__line {
    background-color: #1989fa !important;
  }
</style>
